/*----------------------------------------*\
  RATIO
\*----------------------------------------*/

.ratio {
  @apply relative;
  @apply z-50; /* for video iframes in clickable cards */

  & > * {
    @apply w-full h-full;
    @apply absolute top-0 right-0 bottom-0 left-0;
  }
}

.ratio--1\/1 {
  @apply pb-[98%]; /* ratio 1:1, with visual correction */
}

.ratio--2\/1 {
  @apply pb-[50%]; /* ratio 2:1 */
}

.ratio--4\/3 {
  @apply pb-[75%]; /* ratio 4:3 */
}

.ratio--16\/9 {
  @apply pb-[56.25%]; /* ratio 16:9 */
}

.ratio--mb {
  @apply mb-6;
}

video::cue {
  @apply text--base;
  @apply text-yellow-200 bg-transparent;
  text-shadow: -0.5px -0.5px 0 #000, 0 -0.5px 0 #000, 0.5px -0.5px 0 #000,
    0.5px 0 0 #000, 0.5px 0.5px 0 #000, 0 0.5px 0 #000, -0.5px 0.5px 0 #000,
    -0.5px 0 0 #000, 0 0 3px #000;

  @media all and (display-mode: fullscreen) {
    font-family: 'FrutigerNeueLTPro-Bold';
    font-size: calc(13px + 2vw);
  }
}
